<script setup>
import { ref } from "vue";
import { loginApi } from "@/api/login";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { Register } from "@/api/user";

//是否显示注册框
const centerDialogVisible = ref(false);

const loginFrom = ref({ name: "", password: "" });
const router = useRouter(); //获取当前路由实例
const form = ref({
  name: "",
  password: "",
  gender: "1",
  identify: false,
});

//登录
const login = async () => {
  const result = await loginApi(loginFrom.value);
  if (result.code) {
    //登录成功
    //1. 提示信息
    ElMessage.success(result.msg);

    //2. 保存token到本地
    localStorage.setItem("token", JSON.stringify(result.data));
    //3. 跳转到首页
    router.push("/");
  } else {
    //登录失败
    ElMessage.error(result.msg);
  }
};

//重置
const clear = () => {
  loginFrom.value.name = "";
  loginFrom.value.password = "";
};

//游客登录
const visitor = () => {
  loginFrom.value.name = "游客";
  loginFrom.value.password = "0";
  login();
};

//注册
const getNewUser = async () => {
  if (form.value.name === "") {
    ElMessage.error("用户名不能为空");
    return;
  }else if(form.value.password === ""){
    ElMessage.error("密码不能为空");
    return;
  }
  form.value.identify = form.value.identify ? 2 : 1;
  const result = await Register(form.value);
  if (result.code) {
    ElMessage.success(result.msg);
    centerDialogVisible.value = false;
  } else {
    ElMessage.error(result.msg);
  }
  centerDialogVisible.value = false;
};

//取消注册
const quit = () => {
  centerDialogVisible.value = false; 
  form.value.name = "";
  form.value.password = "";
  form.value.gender = "1";
  form.value.identify = false;
}
</script>

<template>
  <!-- 登录 -->
  <div id="container">
    <div class="login-form">
      <el-form label-width="80px">
        <p class="title">个人博客项目</p>
        <el-form-item label="用户名" prop="username">
          <el-input v-model="loginFrom.name" placeholder="请输入用户名"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="loginFrom.password" type="password" placeholder="请输入密码"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button class="button" type="primary" @click="login">登 录</el-button>
          <el-button class="button" type="info" @click="clear">重 置</el-button>
          <br />
          <el-button class="button" type="success" @click="visitor">游客登录</el-button>
          <el-button class="button" type="warning" @click="centerDialogVisible = true">注 册</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

  <!-- 注册 -->
  <el-dialog v-model="centerDialogVisible" title="注册新用户" width="500" align-center>
    <el-form :model="form" label-width="auto">
      <el-form-item label="用户名">
        <el-input v-model="form.name" placeholder="请输入用户名"/>
      </el-form-item>

      <el-form-item label="密码">
        <el-input v-model="form.password" placeholder="请输入密码"/>
      </el-form-item>

      <el-form-item label="性别">
      <el-select v-model="form.gender" placeholder="请选择性别">
        <el-option label="男性" value="1" />
        <el-option label="女性" value="2" />
      </el-select>
    </el-form-item>

      <el-form-item label="是否为管理员">
        <el-switch v-model="form.identify" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="info" @click="quit">取消</el-button>
        <el-button type="primary" @click="getNewUser">注册</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped>
#container {
  padding: 10%;
  height: 410px;
  background-image: url("../../assets/bg1.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

.login-form {
  max-width: 400px;
  padding: 30px;
  margin: 0 auto;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  background-color: white;
}

.title {
  font-size: 30px;
  font-family: "楷体";
  text-align: center;
  margin-bottom: 30px;
  font-weight: bold;
}

.button {
  margin-top: 30px;
  width: 120px;
}
</style>
